<template>
    <div>
        <div class="custom-tree-container">
            <p>权限树</p>
            <el-button-group style="margin-left: 257px;">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="saveUI">
                </el-button>
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="updateUI">
                </el-button>
                <el-button type="primary" icon="el-icon-minus" size="mini" @click="remove">
                </el-button>
            </el-button-group>

            <el-tree :data="root" :show-checkbox="false" node-key="permissionId" :default-expand-all="true"
                @node-click="handleNodeClick" :expand-on-click-node="false"
                :props="{ label: 'permissionName', children: 'children' }" :highlight-current="true" style="width: 400px;">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span v-if="!data.isInput">{{ node.label }}</span>
                    <span v-else="data.isInput"><el-input v-model="data.permissionName" @blur="sub"
                            size="small"></el-input></span>
                </span>
            </el-tree>
        </div>

        <div>

        </div>
    </div>
</template>

<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

/* 设置节点高度 */
.el-tree-node__content {
    height: 32px;
}
</style>

<script>
import { getRoot, del, save, update } from '@/api/Permission/Permission.js'
export default {
    data() {
        return {
            root: [],
            currNode: {},
            currData: {},
            currInput: ""
        }
    },
    mounted() {
        this.rootLoad();
    },
    methods: {
        rootLoad() {
            getRoot().then(r => {
                let d = [r.data]
                this.root = d
            })
        },
        /* append(data) {
            let newChild = { permissionName: 'todo', parentId: data.permissionId, children: [] };
            if (!data.children) {
                this.$set(data, 'children', []);
            }
            save(newChild).then(r => {
                console.log(r);
                if (r.code == 200) {
                    newChild.permissionId = r.data.permissionId
                    data.children.push(newChild);
                    this.$message.success(r.msg);
                    return;
                }
                this.$message.error(r.msg);
            })

        }, */
        remove() {
            if (this.currData.children && this.currData.children.length > 0) {
                this.$message.info("有子权限不能删除")
                return;
            }
            const parent = this.currNode.parent;
            const children = parent.data.children;
            if (!children) {
                this.$message.error("root权限不能删除")
                return
            }
            this.$confirm('此操作将永劫删除该数据，是否删除', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                del(this.currData.permissionId).then(r => {
                    if (r.code == 200) {
                        const index = children.findIndex(d => d.permissionId === this.currData.permissionId);
                        children.splice(index, 1);
                        this.$message.success("删除成功")
                    }
                })
            }).catch(() => {
                this.$message.info("取消删除")
            })

        },
        handleNodeClick(data, node) {
            this.currNode = node;
            this.currData = data;
        },
        updateUI() {
            this.$set(this.currData, 'isInput', true)
        },
        saveUI() {
            let newChild = { permissionName: 'todo', parentId: this.currData.permissionId, children: [], isInput: true };
            if (!this.currData.children) {
                this.$set(this.currData, 'children', []);
            }
            this.currData.children.push(newChild);
        },
        sub() {
            this.$set(this.currData, 'isInput', false);
            if (!this.currData.permissionId) {
                save(this.currData).then(r => {
                    if (r.code == 200) {
                        this.$set(this.currData, 'permissionId', r.data.permissionId);
                        this.$message.success(r.msg);
                        return;
                    }
                    this.$message.error(r.msg);
                })
                return;
            }
            update(this.currData).then(r => {
                if (r.code == 200) {
                    this.$message.success(r.msg);
                    return;
                }
                this.$message.error(r.msg);
            })

        }

    }
};
</script>
